// function App() {
//   return <div css={{ width: 200, height: 200, background: "red" }}>hi</div>;
// }


// import { css } from "@emotion/core"; // 报如下错误
// Error: The `@emotion/core` package has been renamed to `@emotion/react`.
// Please import it like this `import { jsx } from '@emotion/react'`.

import { css } from "@emotion/react";

// 使用方式一
// const style = css`
//   width: 100px;
//   height: 200px;
//   background: skyblue;
// `;
// console.log(style);

// 使用方式二
// const style = css({
//   width: 200,
//   height: 200,
//   background: 'blue'
// })

// function App() {
//   return <div css={style}>App</div>;
// }


import Css from './Css'

const style = css`
background: skyblue
`
// props样式的优先级高于css组件默认样式
function App() {
  return <div>
    <Css css={style}/>
  </div>;
}

export default App;
